<template>
    <el-dialog width="30%" :visible.sync="treeShow" append-to-body :close-on-click-modal="false" title="批量导出">
        <!-- 批量导出测点 特征值数据 -->
        <div class="content">
            <div class="item">
                <el-cascader placeholder="请选择区域" :options="backstageData" :show-all-levels="false"
                    :props="{ checkStrictly: false }" clearable v-model="zone_arr"></el-cascader>
                <!-- <zy-device @change="changeDevice" :value="device_arr"></zy-device> -->
            </div>

            <div class="item">
                <el-date-picker v-model="date_time" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" align="right" value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="pickerOptions"></el-date-picker>
            </div>
            <!-- <div class="item">
                <el-select v-model="tagsSelected" collapse-tags multiple placeholder="请选择特征值">
                    <el-option v-for="item in tags" :key="item.id" :label="item.value" :value="item" />
                </el-select>
            </div> -->
        </div>
        <div style="margin-top: 10px;">
            <el-button type="primary" size="small" @click="submit">导出</el-button>
            <el-button size="small" @click="treeShow = false"> 取消</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { mapState } from 'vuex'
import { fileApi } from '@/requset/api'
import zyDevice from './zyDevice.vue'

export default {
    data() {
        return {
            treeShow: false,
            tags: null,
            tagsSelected: [],
            date_time: '',
            zone_arr: [],
            pickerOptions: {
                shortcuts: [
                    {
                        text: '最近 1h',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 1)
                            picker.$emit('pick', [start, end])
                        },
                    },
                    {
                        text: '最近 3h',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 3)
                            picker.$emit('pick', [start, end])
                        },
                    },

                    {
                        text: '最近 6h',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 6)
                            picker.$emit('pick', [start, end])
                        },
                    },
                ],
            }
        }
    },
    computed: {
        ...mapState('backstage', ['backstageData'])
    },
    components: {
        zyDevice
    },
    methods: {
        doOpen(tags) {
            this.tags = tags
            this.treeShow = true
        },
        changeDevice(e) {

            this.zone_arr = e
        },
        submit() {
            const { zone_arr, tagsSelected, date_time } = this
            if (zone_arr.length == 0) {
                this.$message.info('请选择区域')
                return
            }
            // if (date_time.length == 0) {
            //     this.$message.info('请选择时间范围')
            //     return
            // }
            // if (tagsSelected.length == 0) {
            //     this.$message.info('请选择导出特征值')
            //     return
            // }
            let obj = {
                zone_id: zone_arr[zone_arr.length - 1],
                // feature_key: tagsSelected,
                date_time,
            }

            fileApi("post", "eigenvalue/batch/download", obj, true).then(res => {

                if (res.code == 0) {
                    this.treeShow = false
                    this.$message.success("导出成功")
                }
            })

        }
    }
}
</script>

<style lang="less" scoped>
.content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    // justify-content: ;
    .item {
        width: 180px;
        margin-bottom: 10px;
    }
}
</style>
